<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
 </head>
<body>
	<canvas id="pizarra" width="300px" height="200px" style="border: 1px solid black;"></canvas>
	<br/>
   	<a href="javascript:borrar()" id="borrar_bt">Borrar Pizarra</a>
   	<a href="javascript:send()" id="borrar_bt">Guardar</a>
    
	<script type="text/javascript" >
				var pizarra_canvas
				var pizarra_context
				function init(){
						pizarra_canvas = document.getElementById("pizarra");
						pizarra_context = pizarra_canvas.getContext("2d");
						pizarra_context.strokeStyle = "#000";
						pizarra_canvas.addEventListener("mousedown",empezarPintar,false);
						pizarra_canvas.addEventListener("mouseup",terminarPintar,false);

				}
				function empezarPintar(e){
					pizarra_context.beginPath();
					pizarra_context.moveTo(e.clientX-pizarra_canvas.offsetLeft,e.clientY-pizarra_canvas.offsetTop);
					pizarra_canvas.addEventListener("mousemove",pintar,false)
				}
				function terminarPintar(e){
					pizarra_canvas.removeEventListener("mousemove",pintar,false);
				}
				function pintar(e) {
					pizarra_context.lineTo(e.clientX-pizarra_canvas.offsetLeft,e.clientY-pizarra_canvas.offsetTop);
					pizarra_context.stroke();
				}
				function borrar(){
					pizarra_canvas.width = pizarra_canvas.width;
				}
				function send()
				{
						var imageData =  pizarra_canvas.toDataURL();
						var xmlhttp = new XMLHttpRequest();
						xmlhttp.open("POST", "#{request.contextPath}/receiver", true);
						xmlhttp.send(imageData);
				};
				init();
	</script>
</body>
</html>


